<template>
    <div class="mt40">
        <!-- <div class="page-tit">绑定手机</div> -->
        <div class="form-item" v-if="step==1||!info.phone">
            <label>绑定手机号</label>
            <input class="max-340" v-model="form.phone" type="text" :disabled="!!info.phone" placeholder="请输入" ><a class="primary-btn" @click="handleBindEmail" v-if="!isSendEmail&&step==1">{{info.phone?'更换手机号':(isSendEmail?second+'秒后重试':'获取验证码')}}</a>
        </div>

        <div class="form-item" v-if="step==2">
            <label>验证码</label>
            <input class="max-340" v-model="form.emailCode" type="text" placeholder="请输入"><a class="primary-btn" @click="handleAgainSend">{{isSendEmail?second+'秒后重试':'重新获取'}}</a>
        </div>
        <div class="form-item" v-if="step==2">
            <a class="primary-btn confirm ml0" @click="handleConfirmBindEmail" v-if="!info.phone">绑定</a><a v-else class="primary-btn confirm ml0" @click="handleNext">下一步</a>
        </div>

        <div class="form-item" v-if="step==3">
            <label>绑定新手机号</label>
            <input class="max-340" v-model="form.newPhone" type="text" placeholder="请输入" >
        </div>
        <div class="form-item" v-if="step==3">
            <label>验证码</label>
            <input class="max-340" v-model="form.emailCode" type="text" placeholder="请输入"><a class="primary-btn" @click="handleAgainSend">{{isSendEmail?second+'秒后重试':'重新获取'}}</a>
        </div>
        <div class="form-item" v-if="step==3">
            <a class="primary-btn confirm ml0" @click="handleConfirmChange">完成</a>
        </div>
    </div>
</template>

<script>
import api from '@/api/api'
export default {
    data(){
        return {
            changeType:'',
            step:1,
            emailCode:'',
            isSendEmail:false,
            isSendPhone:false,
            timer:null,
            second:60
        }
    },
    props:['form','info'],
    methods:{
        async handleNext(){
            if(!this.form.emailCode){
                this.$amessage.error('请填写验证码')
                return;
            }
            let res=await api.checkCode({type:4,phone:this.form.phone,code:this.form.emailCode});
            if(res.code==0){
                this.step=3;
                this.second=60;
                this.isSendEmail=false;
                this.form.emailCode='';
                if(this.timer)
                    clearInterval(this.timer);
            }
        },
        async handleAgainSend(_type){
            let that=this;
            if(this.isSendEmail){
                this.$amessage.error('请勿频繁操作')
                return;
            }
            let res=await api.sendSms({phone:this.step==2?this.form.phone:this.form.newPhone,type:4});
            if(res.code==0){
                this.isSendEmail=true;
                this.$amessage.success('发送成功')

                this.timer=setInterval(function(){
                    if(that.second==1){
                        that.second=60;
                        that.isSendEmail=false;
                        if(that.timer)
                            clearInterval(that.timer);
                        return;
                    }
                    that.second--;
                },1000)
            }
        },
        async handleConfirmChange(){
            let reg=/^1\d{10}$/;
            if(!reg.test(this.form.newPhone)){
                this.$amessage.error('手机号格式不正确')
                return;
            }
            if(!this.form.emailCode){
                this.$amessage.error('请填写验证码')
                return;
            }
            let res=await api.bindPhone({code:this.form.emailCode,phone:this.form.newPhone});
            if(res.code==0){
                this.$amessage.success('绑定成功')
                if(this.timer)
                    clearInterval(this.timer);
                this.second=60;
                this.isSendEmail=false;
                this.step=1;
                this.info.phone=this.form.newPhone;
                this.form.phone=this.form.newPhone;
                this.form.newPhone='';
                this.form.emailCode='';
                this.$emit('update:info',this.info);
                this.$emit('update:form',this.form);
            }
        },
        async handleConfirmBindEmail(){
            if(!this.form.phone||!this.form.emailCode){
                this.$amessage.error('请填写手机号、验证码')
                return;
            }
            let res=await api.checkCode({type:4,phone:this.form.phone,code:this.form.emailCode});
            if(res.code==0){
                res=await api.bindPhone({code:this.form.emailCode,phone:this.form.phone});
                if(res.code==0){
                    this.$amessage.success('绑定成功')
                    if(this.timer)
                        clearInterval(this.timer);
                    this.second=60;
                    this.isSendEmail=false;
                    this.step=1;
                    this.info.phone=this.form.phone;
                    this.form.emailCode='';
                    this.$emit('update:info',this.info);
                    this.$emit('update:form',this.form);
                }
            }
        },
        async handleBindEmail(){
            let that=this;
            //已经绑定过手机时
            if(this.info.phone){
                let res=await api.sendSms({phone:this.form.phone,type:4});
                if(res.code==0){
                    this.isSendEmail=true;
                    this.step=2;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendEmail=false;
                            if(that.timer)
                                clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }else{
                if(!this.form.phone){
                    this.$amessage.error('请输入手机号')
                    return;
                }
                let reg=/^1\d{10}$/;
                if(!reg.test(this.form.phone)){
                    this.$amessage.error('手机格式不正确')
                    return;
                }
                let res=await api.sendSms({phone:this.form.phone,type:4});
                if(res.code==0){
                    this.isSendEmail=true;
                    this.step=2;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendEmail=false;
                            if(that.timer)
                                clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }
        }
    }
}
</script>